<template>
    <div>
        <el-container class="main">
            <el-aside class="left">
                <div class="top">
                    <el-button class="create-button" size="medium" @click="createRole">添加角色</el-button>
                </div>
                <div class="content">
                    <div :class="'item ' + (item.id === form.id ? 'active' : '')" v-for="(item, index) in list" :key="index">
                        <div class="name" @click="selectRole(index, item)">{{  item.name }}</div>
                        <div class="buttons">
                            <el-button icon="el-icon-edit" type="text" size="medium" class="opt" @click="modifyRole(index, item)"></el-button>
                            <el-button icon="el-icon-delete" type="text" size="medium" class="opt" @click="deleteRole(index, item)"></el-button>
                        </div>
                    </div>
                </div>
            </el-aside>
            <el-container class="main-content">
                <el-tabs style="width: 100%;" v-model="tab_name" @tab-click="selectTab">
                    <el-tab-pane label="功能权限" name="menus">
                        <div class="head">
                            <span class="title">网页端功能权限</span>
                            <el-button type="primary" class="light-blue-btn" size="mini" @click="saveMenus">保存</el-button>
                        </div>
                        <el-tree
                            :props="{label: 'name', children: 'children'}"
                            :data="menus"
                            show-checkbox
                            node-key="id"
                            :default-expanded-keys="[0]"
                            :default-checked-keys="form.menus"
                            @check="selectMenus"
                            ref="tree"
                        >
                        </el-tree>
                    </el-tab-pane>
                    <el-tab-pane label="关联用户" name="users">
                        <el-table
                            :data="userList"
                            stripe
                            style="width: 100%">
                            <el-table-column
                                type="index"
                                label="序号"
                                width="180"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="姓名"
                                width="180"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="code"
                                label="工号"
                            >
                            </el-table-column>  
                            <el-table-column
                                prop="roles"
                                label="角色"
                            >
                                <template slot-scope="scope">
                                    <el-tag v-for="item in scope.row.roles" :key="item" style="margin-right: 5px;">{{ getUserRole(item) }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="status_formatted"
                                label="状态"
                            >
                                <template slot-scope="scope">
                                    <el-tag type="success" v-if="scope.row.status === 1">{{ scope.row.status_formatted }}</el-tag>
                                    <el-tag type="danger" v-else>{{ scope.row.status_formatted }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" @click="editUser(scope.$index, scope.row)">修改</el-button>
                                    <el-button size="mini" type="text" @click="delUser(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block" style="margin-top:10px;display:flex;justify-content: flex-end;">
                            <el-pagination
                                @size-change="changePageSize"
                                @current-change="goPage"
                                :current-page="page"
                                :page-sizes="[20, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                            >
                            </el-pagination>
                        </div>

                        <el-dialog title="编辑用户" :visible.sync="showUserModal" width="40%">
                            <el-form :model="userForm" label-width="80px">
                                <el-form-item label="姓名" >
                                    <el-input v-model="userForm.name" autocomplete="off" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="工号">
                                    <el-input v-model="userForm.code" autocomplete="off" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input v-model="userForm.password" autocomplete="off" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="角色">
                                    <el-select v-model="userForm.roles" placeholder="请选择角色" multiple style="width: 100%;">
                                        <el-option v-for="item in list" :key="item.id" :value="item.id" :label="item.name"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="状态">
                                    <el-radio-group v-model="userForm.status">
                                        <el-radio label="1" value="1">启用</el-radio>
                                        <el-radio label="2" value="2">停用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="showUserModal = false">取 消</el-button>
                                <el-button type="primary" @click="doModifyUser">确 定</el-button>
                            </div>
                        </el-dialog>
                    </el-tab-pane>
                </el-tabs>
                
            </el-container>
        </el-container>

        <el-dialog :title="modalTitle" :visible.sync="showModal">
            <el-form :model="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showModal = false">取 消</el-button>
                <el-button type="primary" @click="submit" :loading="lock">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import authRoles from '@/api/setting/auth-roles'
    import authUsers from '@/api/setting/auth-users';

    export default {
        data() {
            return {
                page: 1,
                pageSize: 20,
                list: [],
                lock: false,
                modalAct: "create",
                showModal: false,
                showUserModal: false,
                menus: [],
                formLabelWidth: '80px',
                form: {
                    id: 0,
                    name: '',
                    menus: []
                },
                userList: [],
                total: 0,
                userForm: {
                    id: 0,
                    name: '',
                    code: '',
                    password: '',
                    roles: [],
                    status: 1
                },
                tab_name: 'menus'
            };
        },
        computed: {
            modalTitle() {
                return this.modalAct === 'create' ? '添加角色' : "修改角色";
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            async getList() {
                let res = await authRoles.getList();
                this.list = res.data.list;
                this.menus = res.data.menus;
                this.$nextTick(() => {
                    if (this.list.length > 0) {
                        if (this.form.id === 0) {
                            this.form = {
                                id: this.list[0].id,
                                name: this.list[0].name,
                                menus: this.list[0].menus
                            }
                        }
                    } 
                });
            },
            createRole() {
                this.modalAct = "create";
                this.showModal = true;
                this.form = {
                    id: 0,
                    name: '',
                    menus: []
                };
            },
            modifyRole(index, row) {
                this.modalAct = 'modify';
                this.form = {
                    id: row.id,
                    name: row.name,
                    menus: row.menus
                };
                this.$refs.tree.setCheckedKeys(row.menus);
                this.showModal = true;
            },
            async submit() {
                if (this.lock === true) {
                    return false;
                }
                this.lock = true;
                let res;
                if (this.modalAct === "create") {
                    res = await authRoles.create(this.form);
                } else {
                    res = await authRoles.modify(this.form);
                }
                this.lock = false;
                if (res.code === 0) {
                    this.$message.success(res.msg);
                    this.showModal = false;
                    this.getList();
                } else {
                    this.$message.error(res.msg);
                }
            },
            selectRole(index, row) {
                this.form = {
                    id: row.id,
                    name: row.name,
                    menus: row.menus
                };
                if (this.tab_name === 'users') {
                    this.getUserList();
                }
                this.$refs.tree.setCheckedKeys(row.menus);
            },
            deleteRole(index, row) {
                this.$confirm('是否确认删除该角色?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await authRoles.delete({id: row.id});
                    if (res.code === 0) {
                        this.$message.success(res.msg);
                        this.form.id = 0;
                        this.getList();
                    } else {
                        this.$message.error(res.msg);
                    } 
                }).catch(() => {});
            },
            selectMenus(data, checked) {
                this.form.menus = checked.checkedKeys;
            },
            async saveMenus() {
                if (this.form.id === 0) {
                    this.$message.error("请选择角色");
                    return false;
                }
                if (this.lock === true) {
                    return false;
                }
                this.lock = true;
                let res = await authRoles.modify(this.form);
                this.lock = false;
                if (res.code === 0) {
                    this.$message.success(res.msg);
                    this.showModal = false;
                    this.getList();
                } else {
                    this.$message.error(res.msg);
                }
            },
            async getUserList() {
                let res = await authRoles.getUserList({page: this.page, size: this.pageSize, role_id: this.form.id});
                this.userList = res.data.list;
                this.total = res.data.total;
            },
            editUser(index, row) {
                for (let i in this.userForm) {
                    this.userForm[i] = row[i];
                }
                this.showUserModal = true;
            },
            delUser(index, row) {
                this.$confirm('是否确认删除该用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await authUsers.delete({code: row.code});
                    if (res.code === 0) {
                        this.$message.success(res.msg);
                        this.getList();
                    } else {
                        this.$message.error(res.msg);
                    } 
                }).catch(() => {});
            },
            changePageSize(size) {
                this.pageSize = size;
                this.page = 1;
                this.getUserList();
            },
            goPage(page) {
                this.page = page;
                this.getUserList();
            },
            doSearch() {
                this.page = 1;
                this.getUserList();
            },
            async doModifyUser() {
                if (this.lock === true) {
                    return false;
                }
                this.lock = true;
                let res = await authUsers.modify(this.userForm);
                
                this.lock = false;
                if (res.code === 0) {
                    this.$message.success(res.msg);
                    this.showUserModal = false;
                    this.getUserList();
                } else {
                    this.$message.error(res.msg);
                }
            },
            getUserRole(role) {
                let item = this.list.find((item) => {
                    return item.id === role;
                });
                return item.name;
            },
            selectTab() {
                if (this.tab_name === 'users') {
                    this.getUserList();
                }
            }
        }
    }
</script>

<style lang="scss">
    .main {
        height:85vh;
        border:1px solid #d4d4dc;
        .left {
            background-color: rgb(238, 241, 246);
            border-right:1px solid #d4d4dc;
            height:100%;
            width:20%;
            .create-button {
                width: 100%;
                border: 1px dashed #8585f9;
                color: #8585f9;
            }
            .content {
                margin-top: 10px;
                .item {
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    padding: 2px;
                    .opt {
                        font-size: 18px;
                        padding: 0;
                        color: rgb(154, 151, 174)
                    }
                    .opt:hover {
                        color: #8585f9;
                    }
                    .name {
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow:hidden;
                        width: 75%;
                    }
                    .buttons {
                        width: 25%;
                    }
                }
                .item.active {
                    .name {
                        color: #8585f9;
                    }
                }
            }
        }
        .main-content {
            background: #fff;
            padding: 20px;
            .head {
                display: flex;
                justify-content: space-between;
                .title {
                    display: inline-block;
                    color: #606266;
                    font-weight: bold;
                    font-size: 15px;
                    margin-top: 10px;
                    margin-bottom: 20px;
                }
            }
            
            .menus {
                width: 100%;
            }
        }
    }
    .el-tree-node__content, .el-tree-node__label {
        font-size: 16px;
    }
    
</style>